﻿
/// <reference path="jquery-1.7.1-vsdoc.js" />
var info = null;
var context = null;
$(document).ready(function () {
    info = $("#info")[0];
    context = $("canvas")[0].getContext('2d');
    $("canvas").on('mousemove', onMouseMove);
    $("canvas").on('mousedown', onMouseDown);
    $("canvas").on('mouseup', onMouseUp);
});


//var canvas = document.getElementsByTagName('canvas')[0];
//canvas.addEventListener('mousemove', onMouseMove, false);
//canvas.addEventListener('mousedown', onMouseDown, false);
//canvas.addEventListener('mouseup', onMouseUp, false);


var linex = new Array();
var liney = new Array();
var linen = new Array();

var lastX = -1;
var lastY = -1;
var hue = 0;
var flag = 0;

function onMouseMove(evt) {
    var lastX = evt.offsetX;
    var lastY = evt.offsetY;
    linex.push(lastX);
    liney.push(lastY);
    linen.push(flag);
    context.save();
    context.translate(context.canvas.width / 2, context.canvas.height / 2);
    context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
    context.beginPath();
    context.lineWidth = 5 + Math.random() * 10;
    if (flag == 1) {
        context.lineTo(lastX, lastY);
        for (var i = 1; i < linex.length; i++) {
            lastX = linex[i];
            lastY = liney[i];
            if (linen[i] == 0) {
                context.moveTo(lastX, lastY);
            } else {
                context.lineTo(lastX, lastY);
            }
        }

    }
    else {
        context.moveTo(lastX, lastY);
    }
    huehue = hue + 10 * Math.random();
    context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
    context.shadowColor = 'white';
    context.shadowBlur = 10;
    context.stroke();
    info.firstChild.nodeValue = 'x = ' + lastX + ' y = ' + lastY;
}
function onMouseDown(evt) {
    flag = 1;
    //    linex.push(evt.layerX);
    //    liney.push(evt.layerY);
    //    linen.push(0);
}
function onMouseUp(evt) {
    flag = 0;
    //    linex.push(evt.layerX);
    //    liney.push(evt.layerY);
    //    linen.push(0);
}


//<html>  
// <head>  
//  <title>write demo</title>  
//  </head>  
// <body>  
//<canvas width="800" height="450" style="border:1px solid black"></canvas>  
//<div id="info">-</div>
//<script>  
// var canvas = document.getElementsByTagName('canvas')[0];  
// canvas.addEventListener('mousemove', onMouseMove, false);  
// canvas.addEventListener('mousedown', onMouseDown, false);  
// canvas.addEventListener('mouseup', onMouseUp, false);  
//  
// var info = document.getElementById('info');
// var context = canvas.getContext('2d');  
// var linex = new Array();  
// var liney = new Array();  
// var linen = new Array();  
//  
// var lastX = -1;  
// var lastY = -1;  
// var hue = 0;  
// var flag = 0;  
//  
// function onMouseMove(evt) {
//    if (flag == 1) {  
//       linex.push(evt.layerX);  
//       liney.push(evt.layerY);  
//       linen.push(1);  
//       context.save();  
//       context.translate(context.canvas.width/2, context.canvas.height/2);  
//       context.translate(-context.canvas.width/2, -context.canvas.height/2);  
//       context.beginPath();  
//       context.lineWidth = 5 + Math.random() * 10;  
//  
//       for (var i=1;i<linex.length;i++) {  
//             lastX = linex[i];  
//             lastY = liney[i];  
//             if (linen[i] == 0) {  
//                context.moveTo(lastX,lastY);  
//             } else {  
//                context.lineTo(lastX,lastY);  
//             }  
//       }  
//  
//       huehue = hue + 10 * Math.random();  
//       context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';  
//       context.shadowColor = 'white';  
//       context.shadowBlur = 10;  
//       context.stroke();  
//       context.restore();  
//    }  
//  info.firstChild.nodeValue ='x = ' + evt.layerX + ' y = ' + evt.layerY;
// }  
// function onMouseDown(evt) {  
//    flag = 1;  
//    linex.push(evt.layerX);  
//    liney.push(evt.layerY);  
//    linen.push(0);  
// }  
// function onMouseUp(evt) {  
//    flag = 0;  
//    linex.push(evt.layerX);  
//    liney.push(evt.layerY);  
//    linen.push(0);  
// }  
//</script>  
//</body>  
//</html>   